<template>
  <div class="content">
    <div class="tit">
      我的保证金
    </div>
    <div class="information">
      <div class="currentmargin">
        <p class="Title">当前保证金</p>
        <div class="Title_information">
          <div class="Title_information_left">
            <p>保证金余额</p>
            <h1>{{depositList.MyAmount ? depositList.MyAmount + '.00' : 0.00}}元</h1>
          </div>
          <div class="">
            <p>已冻结余额</p>
            <h1>{{depositList.MyFrozen ? depositList.MyFrozen + '.00' : 0.00}}元</h1>
          </div>
        </div>
        <div class="Prompt">
          每参加一辆车的投标或竞拍 , 即会冻结2000.00的保证金 ; 拍卖结束后 , 自动解冻保证金。
        </div>
      </div>
      <!-- 保证金记录 -->
      <div class="minutes">
        <p class="minutes_Title">保证金记录</p>
        <ol class="records" v-if="depositListContent.length > 0">
          <li v-for="(item, i) in depositListContent" :key="item.id" :class="i%2 == 0 ? bgs : ''">
            <div :class="item.tex == '冻结' ? colors : colors1" class="lef">{{item.tex}}</div>
            <div :class="item.tex == '冻结' ? colors : colors1" class="cen"> {{item.amount}}元 </div>
            <div class="rig">
              {{item.createTime.substring(0,4)}}.{{item.createTime.substring(5,7)}}.{{item.createTime.substring(8,10)}}
              {{item.createTime.substring(11,14)}}{{item.createTime.substring(14,16)}}
            </div>
          </li>
        </ol>
        <div v-else class="nullLis">
          <div>
            <img src='../../../../static/img/PersonalCenter/img_baozhengjin_nodata.png' />
            <p>暂无记录<p/>
          </div>
        </div>
        <pagination class="pagination" :page-size="pageSize" :item-count="totalCount" @gotopage="gotopage"></pagination>
      </div>
    </div>
  </div>
</template>
<script>
import pagination from '../../../components/pagination.vue'
export default {
  data () {
    return {
      depositList: {},
      depositListContent: {},
      userLis: {},
      colors: 'orange',
      colors1: 'green',
      bgs: 'bgs',
      pageSize: '1',
      totalCount: '7',
      parameter: {
        userId: '',
        index: '1',
        pageSize: '7'
      }
    }
  },
  components: {pagination},
  watch: {
    parameter: {
      handler: function (val, oldVal) {
        this.getDeposit()
      },
      deep: true
    }
  },
  mounted () {
    // 读取本地
    let storage = window.sessionStorage
    let json = storage.getItem('WSKuserLis')
    let jsonObj = JSON.parse(json)
    if (jsonObj) {
      this.userLis = jsonObj.data.data.user
    }
    this.parameter.userId = this.userLis.id
    this.getDeposit()
  },
  methods: {
    // 保证金记录接口
    getDeposit () {
      // window.scrollTo(0, 0)
      let _this = this
      this.$http({
        url: 'http://paimai.ucarcloud.cn/auctionCarCore/margin/myMarginHistory',
        params: _this.parameter,
        headers: {'from': 'web'}
      }).then(r => {
        this.depositList = r.data.data
        let contents = r.data.data.record.content
        for (let x = 0; x < contents.length; x++) {
          switch (contents[x].status) {
            case '0':
              contents[x].tex = '冻结'
              contents[x].amount = '- ' + contents[x].amount
              break
            case '1':
              contents[x].tex = '冻结'
              contents[x].amount = '- ' + contents[x].amount
              break
            case '2':
              contents[x].tex = '解冻'
              contents[x].amount = '+' + contents[x].amount
              break
            case '3':
              contents[x].tex = '解冻'
              contents[x].amount = '+' + contents[x].amount
              break
            default:
              break
          }
        }
        this.depositListContent = contents
        this.totalCount = r.data.data.record.totalElements
        this.pageSize = r.data.data.record.size
        // console.log(r.data.data)
      })
    },
    gotopage (val) {
      this.parameter.index = val
    }
  }
}
</script>
<style lang="scss" scoped>
.content{
  width: 938px;
  height: 894px;
  border: 1px solid #e3e3e3;
  float: left;
  .tit{
    background: #fafafa;
    height: 50px;
    line-height: 50px;
    overflow: hidden;
    padding: 0 30px;
    font-size: 18px;
    border-bottom: 1px solid #ff6f3c;
  }
  .information{
    padding: 30px;
    .currentmargin{
      // overflow: hidden;
      .Title{
        font-size: 16px;
        color: #333;
        margin-bottom: 18px;
        margin-left: -10px;
        padding-left: 10px;
        border-left: 2px solid #ff6f3c;
        height: 20px;
        line-height: 20px;
      }
      .Title_information{
        overflow: hidden;
        .Title_information_left{
          margin-right: 40px;
        }
        div{
          float: left;
          width: 419px;
          height: 120px;
          background: #fff8f6;
          text-align: center;
          p{
            font-size: 16px;
            color: #333;
            margin: 25px 0 20px;
          }
          h1{
            font-size: 30px;
            color: #ff6f3c;
          }
        }
      }
      .Prompt{
        font-size: 14px;
        color: #999;
        margin-top: 20px;
      }
    }
    .minutes{
      margin-top: 30px;
      .minutes_Title{
        font-size: 16px;
        color: #333;
        margin-bottom: 18px;
        margin-left: -10px;
        padding-left: 10px;
        border-left: 2px solid #ff6f3c;
        height: 20px;
        line-height: 20px;
      }
      .records{
        li{
          overflow: hidden;
          height: 60px;
          line-height: 60px;
          div{
            float: left;
            font-size: 16px;
            text-align: left;
            color: #666;
          }
          .orange{
            color: #ff6f3c;
          }
          .green{
            color: #0db501;
          }
          .lef{
            width: 270px;
            padding-left: 60px;
          }
          .cen{
            width: 288px;
          }
          .rig{
            width: 260px;
          }
        }
        .bgs{
         background: #fafafa;
        }
      }
      .pagination{
        margin-top: 50px;
      }
      .nullLis{
        div{
          width: 113px;
          height: 160px;
          margin: 160px auto;
          text-align: center;
          p{
            color: #666;
            font-size: 14px;
            margin-top: 20px;
          }
        }
      }
    }
  }
}
</style>
